<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script>
    var w = document.documentElement.clientWidth / 10;
    document.getElementsByTagName('html')[0].style['font-size'] = w + 'px';
  </script>
  <style>
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    :after, :before {
      box-sizing: border-box;
    }
    html, body {
      width: 10rem;
      height: 5.625rem;
      overflow: hidden;
    }
    .class-list {
      float: left;
      height: 5.625rem;
      width: 1.666rem;
    }
    .scroll-list {
      padding: 0.1041rem 0;
    }
    .class-item {
      width: 1.354rem;
      height: 0.468rem;
      margin: 0.1041rem auto;
      border-radius: 0.26rem;
      background: #cccccc;
    }
    .class-item.fe-focus {
      background: #FF9800;
    }
    .sperator {
      margin: 0 auto;
      width: 1.302rem;
      height: 0.026rem;
      background: #777777;
    }
    .content-box {
      position: relative;
      float: left;
      width: 8.333rem;
      height: 5.625rem;
    }
    .banner-1 {
      width: 8.125rem;
      height: 2.5rem;
      margin: 0.1041rem;
      background-image: url('https://img.alicdn.com/tps/TB1pUe3KVXXXXcOXpXXXXXXXXXX-348-468.png');
      background-size: 100% 100%;
    }
    .banner-2 {
      float: left;
      width: 3.958rem;
      height: 2.5rem;
      margin: 0.1041rem;
      background-image: url('https://img.alicdn.com/tps/TB1pUe3KVXXXXcOXpXXXXXXXXXX-348-468.png');
      background-size: 100% 100%;
    }
    .banner-1.fe-focus, .banner-2.fe-focus {
      outline: solid 10px #552001;
    }
    .content-item {
      float: left;
      margin: 0.1041rem;
      width: 1.875rem;
      height: 2.5rem;
      background-image: url('https://img.alicdn.com/tps/TB1pUe3KVXXXXcOXpXXXXXXXXXX-348-468.png');
      background-size: 100% 100%;
    }
    .content-item-inner {
      width: 100%;
      height: 100%;
      background-color: #cccccc;
      overflow: hidden;
    }
    .content-item.fe-focus {
      outline: solid 0.052rem #552001;
      transform: scale3d(1.05, 1.05, 1.05);
    }
    .content-item-image {
      display: block;
      margin: 0.1041rem auto;
    }
    .content-item-title {
      font-size: 0.156rem;
      text-align: center;
      margin-top: 0.52rem;
    }
  </style>
</head>
<body fe-role="Switch">
  <div id="class-scroll" class="class-list" fe-role="Scroll">
    <div class="scroll-list">
      <div class="class-item" fe-role="Widget">
      </div>
      <div class="class-item" fe-role="Widget">
      </div>
      <div class="sperator">
      </div>
      <div class="class-item" fe-role="Widget">
      </div>
      <div class="class-item" fe-role="Widget">
      </div>
      <div class="class-item" fe-role="Widget">
      </div>
      <div class="class-item" fe-role="Widget">
      </div>
      <div class="class-item" fe-role="Widget">
      </div>
      <div class="class-item" fe-role="Widget">
      </div>
      <div class="class-item" fe-role="Widget">
      </div>
      <div class="class-item" fe-role="Widget">
      </div>
      <div class="class-item" fe-role="Widget">
      </div>
      <div class="class-item" fe-role="Widget">
      </div>
    </div>
  </div>
  <div id="content-grille" class="content-box" fe-role="Grille" fe-cfg="bottom_padding:50">
    <!--
      在开发阶段，可以先设置fe-role="Switch"，然后在html里写好各个类型的item的布局及样式，便于调整。
      Grille初始化时会首先清空innerHTML，然后根据data和itemRender来创建所有的内容，切换成grille后可清空其innerHTML
    -->
    <!-- <div id="banner-widget" class="banner-1" fe-role="Widget">
    </div>
    <div id="banner-widget" class="banner-2" fe-role="Widget">
    </div>
    <div id="banner-widget" class="banner-2" fe-role="Widget">
    </div>
    <div class="content-item" fe-role="Widget">
      <div class="content-item-inner">
        <img class="content-item-image" src="">
        <div class="content-item-title">
        </div>
      </div>
    </div>
    <div class="content-item" fe-role="Widget">
      <div class="content-item-inner">
        <img class="content-item-image" src="">
        <div class="content-item-title">
        </div>
      </div>
    </div>
    <div class="content-item" fe-role="Widget">
      <div class="content-item-inner">
        <img class="content-item-image" src="">
        <div class="content-item-title">
        </div>
      </div>
    </div>
    <div class="content-item" fe-role="Widget">
      <div class="content-item-inner">
        <img class="content-item-image" src="">
        <div class="content-item-title">
        </div>
      </div>
    </div> -->
  </div>
  <script type="text/javascript" src="FocusEngine.min.js" charset="utf-8"></script>
  <script>
    var root = FocusEngine.render();
    var classScroll = FocusEngine.getWidgetById('class-scroll');
    var contentGrille = FocusEngine.getWidgetById('content-grille');
    /**
     * itemRender是一个通过data转换成dom结构的类，需要开发人员去设置转换。
     * 返回结果可以是dom对象，也可以是string（推荐），如下：
     */
    contentGrille.setItemRender(function(data) {
      if (data.type === 'banner-1') {
        /**
         * grille中懒加载是针对item的dom中包含grille-lazyload的那个dom，比如该img元素。
         * 在非可视状态下，该img元素会从dom中移除，通过减少整个列表中的dom节点数降低内核渲染压力。
        */
        return '<div class="banner-1" fe-role="Widget"><img class="grille-lazyload" style="width:100%;height:100%;" src="' + data.image + '"></div>';
      } else if (data.type === 'banner-2') {
        return '<div class="banner-2" fe-role="Widget"><img class="grille-lazyload" style="width:100%;height:100%;" src="' + data.image + '"></div>';
      } else if (data.type === 'title') {
        /*
         * grille中所有的内容都是通过data到dom的映射来添加的，包括最简单的基本展示dom。
         * 比如该标题头，只是展示，不会获取焦点状态，此种情况去掉fe-role即可，如下是一个分类的标题。
        */
        return '<div style="font-size:0.1041rem;clear:both;">' + data.name + '</div>';
      } else if (data.type === 'item') {
        /*
         * 这是一个最典型的item，将所有的内容包括在grille-lazyload类的dom内，实现懒加载。
         * 进行懒加载和回收操作时，只会寻找一个包含grille-lazyload的dom.
         * 所以，不能并列设置多个包含grille-lazyload类的dom，要将所有需要懒加载的内容包含在一个包含grille-lazyload的dom中。
         * 在非可视区域，一个item仅仅剩余一个容器，内容被回收，极大的减少了dom节点，降低内核渲染压力。
        */
        return (
          '<div class="content-item" fe-role="Widget">' +
            '<div class="grille-lazyload content-item-inner">' +
              '<img class="content-item-image" src="' + data.image + '">' +
              '<div class="content-item-title">' + data.name + '</div>' +
            '</div>' +
          '</div>'
        );
      }
    });

    // 这里是模拟数据，仅仅为了示例
    var grilleMockData = [];
    for (var i = 0; i < 53; i++) {
      switch (i) {
        case 0:
          grilleMockData.push({
            type: 'banner-1',
            image: 'https://img.alicdn.com/tps/TB1Z6efMVXXXXanXpXXXXXXXXXX-672-184.png',
            url: 'http://www.taobao.com'
          });
          break;
        case 1:
          grilleMockData.push({
            type: 'banner-2',
            image: 'https://img.alicdn.com/tps/TB1y0_eLpXXXXb3XFXXXXXXXXXX-335-185.png',
            url: 'http://www.taobao.com'
          });
          break;
        case 2:
          grilleMockData.push({
            type: 'banner-2',
            image: 'https://img.alicdn.com/tps/TB1h.OeMVXXXXacXpXXXXXXXXXX-339-184.png',
            url: 'http://www.taobao.com'
          });
          break;
        case 20:
          grilleMockData.push({
            type: 'title',
            name: '标题标题'
          });
          break;
        default:
          grilleMockData.push({
            type: 'item',
            image: 'https://img.alicdn.com/tps/TB10BDrKVXXXXb0XFXXXXXXXXXX-234-235.png',
            url: 'http://www.taobao.com',
            name: '测试测试' + i
          });
      }
    }
    contentGrille.setData(grilleMockData);
    var focusedClassItem = classScroll.getFocusedChildWidget();
    contentGrille.on('focus', function(e) {
      // e.target.index是当前grille中选中的item对应的是data中的数据的index。
      // 通过记录该index，可以在切换回该分类时还原到上次的位置。
      focusedClassItem.dataIndex = e.target.index;
    });

    var contentLoadTimeout = null;
    classScroll.on('focus', function(e) {
      if (focusedClassItem === e.target) {
        return;
      }
      contentLoadTimeout && clearTimeout(contentLoadTimeout);
      // 通过延迟加载分类内容，避免连续切换时的连续加载。
      contentLoadTimeout = setTimeout(function() {
        contentGrille.setData(grilleMockData, e.target.dataIndex);
        focusedClassItem = e.target;
      }, 1000);
    })
  </script>
</body>
</html>
